<template>
  <div class="taobaowang">
    <el-container>
      <el-main>
        <el-row :gutter="10">
          <el-col :span="12">
            <div class="box">
              <h2>
                <img
                  src="../assets/taobaowang/meirihaodian.png"
                  :alt="res.meirihaodian.title"
                />
                <small>{{ res.meirihaodian.text }}</small>
              </h2>
              <el-row :gutter="10">
                <el-col
                  :span="12"
                  v-for="(item, index) in res.meirihaodian.lists"
                  :key="index"
                >
                  <h3>{{ item.title }}</h3>
                  <el-row :gutter="2">
                    <el-col :span="16">
                      <a href="">
                        <img class="pic" :src="item.pics[0].src" alt="" />
                      </a>
                    </el-col>
                    <el-col :span="8">
                      <a href="">
                        <img
                          class="pic2 pic2-1"
                          :src="item.pics[1].src"
                          alt=""
                        />
                      </a>
                      <a href="">
                        <img class="pic2" :src="item.pics[2].src" alt="" />
                      </a>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="box">
              <h2>
                <img :src="res.taobaozhibo.pic" :alt="res.taobaozhibo.title" />
                <small>{{ res.taobaozhibo.text }}</small>
              </h2>
              <el-row :gutter="10">
                <el-col
                  :span="12"
                  v-for="(item, index) in res.taobaozhibo.lists"
                  :key="index"
                >
                  <h3>
                    {{ item.title }} <small>{{ item.see }}</small>
                  </h3>
                  <el-row :gutter="2">
                    <el-col :span="16">
                      <a href="">
                        <img class="pic" :src="item.pics[0].pic" alt="" />
                        <span class="text">{{ item.pics[0].text }}</span>
                      </a>
                    </el-col>
                    <el-col :span="8">
                      <a href="">
                        <img
                          class="pic2 pic2-1"
                          :src="item.pics[1].pic"
                          alt=""
                        />
                      </a>
                      <a href="">
                        <img class="pic2" :src="item.pics[2].pic" alt="" />
                      </a>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <div class="yhh">
            <h2>
              <img :src="res.youhaohuo.img" alt="" /><small>{{
                res.youhaohuo.type
              }}</small>
            </h2>
            <el-row :gutter="10">
              <el-col
                :span="4"
                v-for="(item, index) in res.youhaohuo.lists1"
                :key="index"
              >
                <a href="">
                  <img class="i1" :src="item.img1" alt="" />
                </a>
                <h4>{{ item.type1 }}</h4>
                <span>{{ item.type2 }}</span>
                <i class="el-icon-sunny">{{ item.type3 }}</i>
              </el-col>
            </el-row>
          </div>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="16">
            <el-row>
              <div class="tshw">
                <h2 class="ts">特色好物</h2>
                <el-col :span="6">
                  <div class="tshw1">
                    <h4>拍卖</h4>
                    <h4><small>1元起拍捡漏</small></h4>
                    <img src="../assets/123/ts1.webp" alt="" />
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="tshw1">
                    <h4>陶小铺</h4>
                    <h4><small>每月多赚1000元</small></h4>
                    <img src="../assets/123/ts2.webp" alt="" />
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="tshw1">
                    <h4>造点新货</h4>
                    <h4><small>全球创意众筹平台</small></h4>
                    <img src="../assets/123/ts3.webp" alt="" />
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="tshw1">
                    <h4>淘宝心选</h4>
                    <h4><small>美好而有用</small></h4>
                    <img src="../assets/123/ts4.webp" alt="" />
                  </div>
                </el-col>
              </div>
            </el-row>
          </el-col>
          <el-col :span="8">
            <div class="tshw">
              <img class="i1" src="../assets/123/ts.jpg" alt="" />
            </div>
          </el-col>
        </el-row>
        <el-row>
          <div class="rmdp">
            <h2>热卖单品</h2>
            <ul class="u1">
              <li>充电宝</li>
              <li>牛仔裤</li>
              <li>窗帘</li>
              <li>耳机</li>
              <li>粉底</li>
              <li>oppo</li>
              <li>女裤</li>
              <li>大码女装</li>
              <li>项链</li>
              <li>男拖鞋</li>
              <li>手链</li>
              <li>zara</li>
              <li>沐浴露</li>
              <li>平板电脑</li>
              <li>卫衣男</li>
              <li>男手表</li>
              <li>华为手机</li>
              <li>床</li>
              <li>外套</li>
              <li>女睡衣</li>
              <li>杯子</li>
              <li>oppo</li>
              <li>安踏</li>
              <li>洗发水</li>
            </ul>
            <el-row :gutter="1">
              <el-col
                :xs="12"
                :sm="12"
                :lg="{ span: '4-8' }"
                class="wind"
                v-for="(item, index) in res.mai.lists"
                :key="index"
              >
                <div class="mai">
                  <img :src="item.img" alt="" />
                  <p>TP-LINK家用游戏办公双频5G千兆1300M无线网</p>
                  <h6>评价 83收藏 3912</h6>
                  <h2>￥165<small>月销64笔</small></h2>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
//模拟请求到的数据
let dataSourse = {
  meirihaodian: {
    title: "每日好店",
    text: "发现十年的好店",
    lists: [
      {
        title: "赶大集",
        pics: [
          {
            link: "",
            src: require("../assets/taobaowang/1.webp"),
          },
          {
            link: "",
            src: require("../assets/taobaowang/2.webp"),
          },
          {
            link: "",
            src: require("../assets/taobaowang/3.webp"),
          },
        ],
      },
      {
        title: "江湖大盗",
        pics: [
          {
            link: "",
            src: require("../assets/taobaowang/4.webp"),
          },
          {
            link: "",
            src: require("../assets/taobaowang/5.webp"),
          },
          {
            link: "",
            src: require("../assets/taobaowang/6.webp"),
          },
        ],
      },
      {
        title: "笑里藏刀",
        pics: [
          {
            link: "",
            src: require("../assets/taobaowang/7.webp"),
          },
          {
            link: "",
            src: require("../assets/taobaowang/8.webp"),
          },
          {
            link: "",
            src: require("../assets/taobaowang/9.webp"),
          },
        ],
      },
      {
        title: "武当派",
        pics: [
          {
            link: "",
            src: require("../assets/taobaowang/10.webp"),
          },
          {
            link: "",
            src: require("../assets/taobaowang/11.webp"),
          },
          {
            link: "",
            src: require("../assets/taobaowang/12.webp"),
          },
        ],
      },
    ],
  },
  taobaozhibo: {
    pic: require("../assets/taobaowang/taobaozhibo.png"),
    title: "淘宝直播",
    text: "你的爱豆直播等你哟！",
    lists: [
      {
        title: "黑脚丫子",
        see: "6193观看",
        pics: [
          {
            pic: require("../assets/taobaowang/13.webp"),
            link: "",
            text: "aj潮鞋半价",
          },
          {
            pic: require("../assets/taobaowang/14.webp"),
            link: "",
            text: "",
          },
          {
            pic: require("../assets/taobaowang/15.webp"),
            link: "",
            text: "",
          },
        ],
      },
      {
        title: "豆豆半半",
        see: "812观看",
        pics: [
          {
            pic: require("../assets/taobaowang/16.webp"),
            link: "",
            text: "夏秋装新款",
          },
          {
            pic: require("../assets/taobaowang/17.webp"),
            link: "",
            text: "",
          },
          {
            pic: require("../assets/taobaowang/18.webp"),
            link: "",
            text: "",
          },
        ],
      },
      {
        title: "大打折扣",
        see: "4300观看",
        pics: [
          {
            pic: require("../assets/taobaowang/19.webp"),
            link: "",
            text: "品牌冬装大件",
          },
          {
            pic: require("../assets/taobaowang/20.webp"),
            link: "",
            text: "",
          },
          {
            pic: require("../assets/taobaowang/21.webp"),
            link: "",
            text: "",
          },
        ],
      },
      {
        title: "十分想你",
        see: "508观看",
        pics: [
          {
            pic: require("../assets/taobaowang/22.webp"),
            link: "",
            text: "潮鞋品鉴",
          },
          {
            pic: require("../assets/taobaowang/23.webp"),
            link: "",
            text: "",
          },
          {
            pic: require("../assets/taobaowang/24.webp"),
            link: "",
            text: "",
          },
        ],
      },
    ],
  },
  youhaohuo: {
    img: require("../assets/123/1.png"),
    type: "与品质生活不期而遇",
    lists1: [
      {
        img1: require("../assets/123/1.webp"),
        type1: "Bite唇釉",
        type2: "简洁的深灰色包装，低调",
        type3: "13人说好",
      },
      {
        img1: require("../assets/123/2.webp"),
        type1: "低热量保持好身材，来",
        type2: "低热量，鲜咸味，超饱腹",
        type3: "41人说好",
      },
      {
        img1: require("../assets/123/3.webp"),
        type1: "入户鞋底清洁神器，让",
        type2: "这款鞋底清洁神器，节能",
        type3: "92人说好",
      },
      {
        img1: require("../assets/123/4.webp"),
        type1: "有了它，外开窗也能装",
        type2: "巨发这款磁性纱窗，可反",
        type3: "152人说好",
      },
      {
        img1: require("../assets/123/5.webp"),
        type1: "苹果iPhone X限量版手机",
        type2: "出色的外观，faceID技术",
        type3: "24人说好",
      },
      {
        img1: require("../assets/123/6.webp"),
        type1: "好利来黑天鹅蛋糕",
        type2: "材料新鲜份量充足，奶香",
        type3: "8人说好",
      },
    ],
  },
  mai: {
    text: "特色好物",
    lists: [
      {
        img: require("../assets/ssss/1.webp"),
        p: "TP-LINK家用游戏办公双频5G千兆1300M无线网",
        h6: "评价 83收藏 3912",
        h2: "￥165",
        small: "月销64笔",
      },
      {
        img: require("../assets/ssss/2.webp"),
        p: "TP-LINK家用游戏办公双频5G千兆1300M无线网",
        h6: "评价 83收藏 3912",
        h2: "￥165",
        small: "月销64笔",
      },
      {
        img: require("../assets/ssss/3.webp"),
        p: "TP-LINK家用游戏办公双频5G千兆1300M无线网",
        h6: "评价 83收藏 3912",
        h2: "￥165",
        small: "月销64笔",
      },
      {
        img: require("../assets/ssss/4.webp"),
        p: "TP-LINK家用游戏办公双频5G千兆1300M无线网",
        h6: "评价 83收藏 3912",
        h2: "￥165",
        small: "月销64笔",
      },
      {
        img: require("../assets/ssss/5.webp"),
        p: "TP-LINK家用游戏办公双频5G千兆1300M无线网",
        h6: "评价 83收藏 3912",
        h2: "￥165",
        small: "月销64笔",
      },
      {
        img: require("../assets/ssss/6.webp"),
        p: "TP-LINK家用游戏办公双频5G千兆1300M无线网",
        h6: "评价 83收藏 3912",
        h2: "￥165",
        small: "月销64笔",
      },
      {
        img: require("../assets/ssss/7.webp"),
        p: "TP-LINK家用游戏办公双频5G千兆1300M无线网",
        h6: "评价 83收藏 3912",
        h2: "￥165",
        small: "月销64笔",
      },
      {
        img: require("../assets/ssss/8.webp"),
        p: "TP-LINK家用游戏办公双频5G千兆1300M无线网",
        h6: "评价 83收藏 3912",
        h2: "￥165",
        small: "月销64笔",
      },
      {
        img: require("../assets/ssss/9.webp"),
        p: "TP-LINK家用游戏办公双频5G千兆1300M无线网",
        h6: "评价 83收藏 3912",
        h2: "￥165",
        small: "月销64笔",
      },
      {
        img: require("../assets/ssss/10.webp"),
        p: "TP-LINK家用游戏办公双频5G千兆1300M无线网",
        h6: "评价 83收藏 3912",
        h2: "￥165",
        small: "月销64笔",
      },
    ],
  },
};

export default {
  name: "TaoBaoWang",
  data() {
    return {
      res: dataSourse,
    };
  },
};
</script>

<style scoped>
.mai{
  height: 280px;
  padding: 20px;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;

  /* box-sizing: border-box; */
}
.wind:nth-child(5)>.mai{
  border-right: none;
}
.wind:nth-child(10)>.mai{
  border-right: none;
}
.wind{
  width: 20%;
}
.mai>p{
  line-height: 18px;
}
.mai>p,h6{
  text-align: left;
}
h6{
  font-weight: 100;
  margin-top: -5px;
}
.mai>h2{
  margin-left: -2px;
}
.mai>h2>small{
  float: right;
  margin-top: 10px;
}
.u1 {
  height: 10px;
  margin-left: -50px;
  margin-top: 30px;
}
.u1 > li {
  list-style: none;
  float: left;
  font-size: 10px;
  margin-left: 12px;
  cursor: pointer;
  position: relative;
}
.u1 > li:hover {
  color: chocolate;
}
.rmdp {
  height: 690px;
  background: #fff;
  padding: 20px;

  /* overflow-x: hidden; */
}
h4 {
  text-align: left;
}
h4 > small {
  margin-left: -2px;
}
.ts {
  color: purple;
}
.tshw1 {
  height: 220px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  margin-top: 30px;
  cursor: pointer;
}
.tshw1:hover {
  border: 1px solid red;
}
.tshw {
  height: 300px;
  background: #fff;
  padding: 20px;
  margin-top: 10px;
}
i {
  font-weight: 100;
  margin-top: 20px;
  float: left;
}
span {
  font-weight: 100;
}
h4 {
  font-weight: 400;
  text-align: left;
}
.yhh {
  height: 300px;
  background: #fff;
  padding: 20px;
  margin-top: 10px;
}
.i1 {
  position: relative;
  top: 10px;
}
.el-main {
  line-height: 10px;
}
.taobaowang {
  background-color: #f4f4f4;
}

.el-container {
  width: 1200px;
  margin: auto;
}

img {
  width: 100%;
  display: block;
}

h2 {
  margin: 0;
  text-align: left;
}

h2 img {
  width: auto;
  height: 24px;
  display: inline-block;
}

small {
  font-size: 12px;
  font-weight: 300;
  color: #999;
  margin-left: 5px;
}

h2 small {
  position: relative;
  top: -7px;
}

h3 {
  font-size: 16px;
  font-weight: 300;
  text-align: left;
}

.pic {
  height: 180px;
}

.pic2 {
  height: 89px;
}

.pic2-1 {
  margin-bottom: 2px;
}

a {
  display: block;
  position: relative;
}

.box {
  background: #fff;
  padding: 20px;
  height: 470px;
}

.text {
  position: absolute;
  bottom: 6px;
  left: 16px;
  color: #fff;
}
</style>
